<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" th:href="@{/CSS/audio.css}">
    <script th:src="@{/JS/vue.min.js}"></script>
    <script th:src="@{/JS/green-audio-player.min.js}"></script>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Audio</title>
    <style type="text/css">
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .ready-player-1 {
            min-height: 40px;
            width: 60%;
            padding-left: 120px;
            padding-right: 120px;
        }
        .center {
            position: absolute;
            left: 56%; top: 150px;
            transform: translate(-56%, 0%);
        }
    </style>
</head>
<body>
<div id="app">
    <div class="ready-player-1 center">
        <img th:src="${imageUrl}" style="position: absolute; width: 80px;left: 0" />
        <audio>
            <source th:src="${audioUrl}">
        </audio>
    </div>
</div>
<script th:inline="javascript">
    let allow2Hide = true, isOnButton = true
    window.onload = function () {
        const totalTime = document.getElementsByClassName('controls__total-time')[0];
        if (totalTime.textContent.indexOf('NaN') > -1) {
            totalTime.textContent = '♪♪:♪♪'
        }
        const volume =  document.getElementsByClassName('volume__controls')[0]
        const button = document.getElementsByClassName('volume__button')[0]
        volume.addEventListener('mouseenter', () =>{ allow2Hide = false })
        volume.addEventListener('mouseleave', () =>{ allow2Hide = true })
        button.addEventListener('mouseenter', () =>{ isOnButton = true })
        button.addEventListener('mouseleave', () =>{ isOnButton = false })
        window.addEventListener('click', ()=> {
            if (allow2Hide && !isOnButton && volume.className.indexOf('hidden') === -1) {
                button.click()
            }
        })
    }
    const app = new Vue({
        el: '#app',
        data: {

        },
        mounted: function () {
        },
        created: function () {
            document.addEventListener('DOMContentLoaded', function() {
                new GreenAudioPlayer('.ready-player-1', { showTooltips: true, showDownloadButton: false, enableKeystrokes: true });
            });
        }
    });
</script>
</body>
</html>
